<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">消息列表</block>
		</cu-custom>
		<!-- 搜索框 -->
		<view class="cu-bar bg-gradual-blue search">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" :adjust-position="false" type="text" v-model='username' @input='inputSearch' placeholder="搜索好友聊天,例:张三" confirm-type="search"></input>
			</view>
			<view class="action" v-if="isSearch" @click="InputBlur">
				<text class="cuIcon-close"></text>
				<text>取消</text>
			</view>
		</view>
		<!-- 联系人列表 -->
		<view class="" v-if="!isSearch">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in friendList" :key="index" :data-target="'move-box-' + index" @click="toChat(item.toid)">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.headUrl+')'}]"></view>
					<view class="content">
						<view class="text-grey">{{item.username}}</view>
						<view class="text-gray text-sm" v-html="item.lastMessage[0].content"></view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.lastMessage[0].time}}</view>
						<view class="cu-tag round bg-red sm" v-if="item.countNoRead != 0">{{item.countNoRead}}</view>
						<viwe class="text-grey text-xs sm" v-else>暂无未读</viwe>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索结果列表 -->
		<view v-if="isSearch">
			<view class="cu-list menu-avatar">
				<view class="cu-item" style="height:60px" v-for="(item,index) in searchData" :key="index" @click="toChat(item.id)">
					<view class="cu-avatar round" :style="{backgroundImage: item.headimgurl ? 'url(' + item.headimgurl + ')' : 'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big21001.jpg)'}"></view>
					<view class="content">
						<view class="text-grey">{{item.nickname}}</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-comment text-blue  margin-right-xs"></text> 点击开始聊天
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Request from '../../lib/request.js'
	import Utils from '../../lib/util.js'
	
	export default {
		data() {
			return {
				ws:null,
				modalName: null,
				isSearch:false,
				username:"",
				userinfo: [],
				searchData:[],
				friendList:[]
			}
		},
		mounted(){
			this.userinfo = uni.getStorageSync('userInfo')
			this.initConn()
		},
		methods: {
			//初始化websocket
			initConn() {
				let ws = this.ws = new WebSocket("ws://127.0.0.1:8282") //创建WebSocket实例
				this.ws.onopen = this.onOpen
				this.ws.onmessage = this.onMessage
			},
			onOpen(e) {
				// websocket连接成功 初始化
				// 初始化发送消息 绑定用户唯一标识uid
				let bild = '{"type":"bind","fromid":"' + this.fromid + '"}'
				this.ws.send(bild)
				// 初始化聊天列表
				this.getIdList()
			},
			onMessage(e) {
				let that = this
				let message = eval("(" + e.data + ")")
			
				// 只要监听到新消息重新获取聊天列表
				switch (message.type) {
					case "text": // 文本消息
						that.getIdList()
						break
					case "sayImage": // 图片消息
						that.getIdList()
						break
				}
			},
			getIdList(){
				let that = this
				Request.httpTokenRequest({url: 'Chat/getIdList',method: 'POST'}, {id:this.userinfo.id}).then(res => {
					if(res.code == 1){
						res.data.forEach((item)=>{
							item = Utils.showMsg(item)
						})
						that.friendList = res.data
					}else{
						uni.showModal({
							content: res.msg,
							showCancel: false
						})
					}
                })
			},
			
			InputFocus(){
				this.isSearch = true
			},
			InputBlur(){
				this.isSearch = false
			},
			
			// 搜索聊天好友
			inputSearch(){
				Request.httpTokenRequest({url: 'User/getUsernameList',method: 'POST'}, {value:this.username,id:this.userinfo.id}).then(res => {
					if(res.code == 1){
						this.searchData = res.data
					}else{
						uni.showModal({
							content: res.msg,
							showCancel: false
						})
					}
                })
			},
			
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			
			// 跳转聊天页面
			toChat(toid){
				uni.navigateTo({
					url:'/pages/msglist/msgc2c?fromid='+this.userinfo.id+"&toid="+toid
				})
			}
		}
	}
</script>

<style>
	
</style>

